<template>
  <div class="popup">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="defaultKeyword"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </form>
    <!-- 历史记录和热门组件 -->
    <HistoryHot
      v-show="page == 1"
      :hotKeywordList="hotKeywordList"
      :historyKeywordList="historyKeywordList"
      @chuan="fun2"
    ></HistoryHot>
    <!-- 搜索内容组件 -->
    <SearchList v-show="page == 2" :GetSearchList="GetSearchList" @f="fun2"></SearchList>
    <SearchResults v-show="page == 3" :goodsData="goodsData" ></SearchResults>
  </div>
</template>

<script>
import {
  GetSearchData,
  GetSearchList,
  GetSearchResults,
  ClearHistory,
} from "@/request/api";
import HistoryHot from "@/components/searchPopup/HistoryHot.vue";
import SearchList from "@/components/searchPopup/SearchList.vue";
import SearchResults from "@/components/searchPopup/SearchResults.vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
      page: "1",
      defaultKeyword: "",
      hotKeywordList: "",
      historyKeywordList: "",
      GetSearchList: "",
      goodsData: "",
      filterCategory:""
    };
  },

  components: {
    HistoryHot,
    SearchList,
    SearchResults,
  },

  created() {
    //搜索窗口数据
    GetSearchData().then((res) => {
      // console.log(res);
      if (res.errno == 0) {
        this.defaultKeyword = res.data.defaultKeyword.keyword;
        this.hotKeywordList = res.data.hotKeywordList;
        this.historyKeywordList = res.data.historyKeywordList;
      }
    });
  },
  beforeCreate() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 1000,
    });
  },
  methods: {
    onSearch(v) {
      // Toast(val);
      this.page = 3;
      // console.log(v);
      GetSearchResults({ keyword: v }).then((res) => {
        this.goodsData = res.data;
        // console.log(this.goodsData);
        // console.log(this.goodsData.filterCategory );
      });
      // console.log(this.GetSearchList);
    },
    fun2(v) {
      this.value=v
      this.onSearch(v);
    },
    onCancel() {
      //   Toast("取消");
      this.$router.go(-1);
    },
    //输入内容后跳页
    onInput(v) {
      this.page = 2;
      //实时搜索数据
      // console.log(v);
      GetSearchList({ keyword: v }).then((res) => {
        // console.log(res);
        this.GetSearchList = res.data;
      });
    },
  },
};
</script>
<style lang='less'>
.popup {
  background-color: #efefef;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
}

.history {
  background-color: rgb(255, 255, 255);
  padding: 0.1rem 0.1rem 0.15rem 0.1rem;
  margin-bottom: 0.2rem;
}
.history_title {
  display: flex;
  justify-content: space-between;
  font-size: 0.18rem;
  h2 {
    padding-bottom: 0.04rem;
  }
}

.van-tag {
  margin-top: 0.08rem;
  margin-right: 0.08rem;
}
</style>